<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS Sprites和滑动门</title>
</head>

<body>
<h1> CSS Sprites的原理（图片整合技术）<br>
</h1>
<p>&nbsp;</p>
<h2>一、将导航背景图片，按钮背景图片等有规则的合并成一张背景图，即将多张图片合为一张整图，然后用background-position”来实现背景图片的定位技术。</h2>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h1>二、图片整合的优势：</h1>
<h2>1）通过图片整合来减少对服务器的请求次数，从而提高 页面的加载速度。</h2>
<h2>2）通过整合图片来减小图片的体积。</h2>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h1>2、CSS Sprites的实现方法</h1>
<p>&nbsp;</p>
<h1>（1）滑动门技术</h1>
<h2>1.什么是滑动门</h2>
<h2>滑动门是一个形象的称呼，它利用CSS背景图像可层叠性，并允许彼此之上进行滑动来创造一些特殊动态效果</h2>
<h2>&nbsp;</h2>
<h2>2.滑动门特征：</h2>
<h2>通过滑动门技术，可以使CSS设计出来的导航菜单兼具传统布局的图像效果，与CSS布局的高效扩展性 。</h2>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p></p>

</body>
</html>
